<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <style>
    .buy-order-form{
      padding:30px 60px 30px 30px; 
      border: solid 1px gray;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }

    .form-title{
      text-align: center;
      color: gray;
    }

    .input-abstract{
      width: 260px;
    }


    .price-unit{
      width: 240px;
    }


    .number-unit{
      width: 80px;
    }

    .supplier{
      width: 260px;
    }


  </style>
</head>
<body>
  <div id="app">
    <el-tabs>
        <el-tab-pane label="BuyOrder">
          <el-row type="flex" justify="center">
            <div class="buy-order-form">
              <el-form label-position="right" label-width="120px">
                <h1 class="form-title">买入物品</h1>
                <el-form-item label="供应商：">
                  <el-select placeholder="可输入搜索" class="supplier"></el-select>
                </el-form-item>
                <el-form-item label="摘要：">
                  <el-input class="input-abstract" type="textarea" placeholder="摘要" :autosize="{ minRows: 2, maxRows: 4}">
                  </el-input>
                </el-form-item>
                <el-form-item label="单价：">
                  <el-input-number class="price-unit"></el-input-number>
                  <label>元</label>
                </el-form-item>
                <el-form-item label="数量：">
                  <el-input-number></el-input-number>
                  <el-input value="套" class="number-unit" ></el-input>
                </el-form-item>
                <el-form-item label="购买时间：">
                  <el-date-picker
                    style="width:265px"
                    value="2024-04-18"
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
              </el-form>
            </div>
          </el-row>

        </el-tab-pane>
        <el-tab-pane label="TheWelcome"></el-tab-pane>
        <el-tab-pane label="EventHandler"></el-tab-pane>
    </el-tabs>
  </div>
</body>
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: function() {
        return { visible: false }
      }
    })
  </script>
</html>
